<template>
	<view class="box">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/qweather-icons@1.3.0/font/qweather-icons.css">
		<view class="top">
			<text class="title">未来预报</text>
		</view>
		<view class="content" v-for="item in WeatherList.daily">
			<view class="weather-day">
				<view class="day">{{item.fxDate | FormatDate('day')}}</view>
				<view class="smallday">{{item.fxDate |FormatDate('smallday')}}</view>
			</view>
			<view class="weather-tem">
				<i :class="'qi-' + item.iconDay" style="color:#242424;"></i>
				<text>{{item.tempMax }}</text>
				<text>{{item.tempMin}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		future
	} from "@/utils/api.js"

	export default {
		name: "future",
		props: {
			position: {
				type: String,
				default: "101010100"

			}
		},
		data() {
			return {
				WeatherList: [],
				icon: ""
			};
		},
		filters: {
			//过滤器过滤时间
			FormatDate(dateString, formatType) {
				const date = new Date(dateString);
				const options = {
					weekday: 'long',
					month: 'long',
					day: 'numeric'
				};
				const today = new Date();

				if (formatType === 'day') {
					if (date.toDateString() === today.toDateString()) {
						return '今天';
					} else {
						return date.toLocaleDateString('zh-CN', {
							weekday: 'long'
						});
					}
				} else if (formatType === 'smallday') {
					return date.toLocaleDateString('zh-CN', {
						month: 'long',
						day: 'numeric'
					});
				}
			}
		},
		watch: {
			position(newValue) {
				this.futureData(newValue)
			}
		},
		methods: {
			//获取未来7天的天气数据
			async futureData(position) {
				console.log("tenfuture触发")
				let res = await future({
					location: position ? position : 101010100,
					key: "2d5557cc8feb46749ee7b458cc0d2e3a",
				});
				this.icon = "qi-" + res.daily.iconDay
				this.WeatherList = res
			}

		}
	}
</script>

<style lang="scss">
	.box {
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;

		.top {
			height: 60rpx;
			overflow: hidden;

			.title {
				float: left;
				font-size: 35rpx;
				font-weight: 600;
				color: #414141;
			}
		}

		.content {
			overflow: hidden;
			margin: 30rpx;
			border-bottom: 2px dotted #e0eece;


			.weather-day {
				float: left;

				.day {
					font-size: 34rpx;
					color: #535353;
				}

				.smallday {
					font-size: 20rpx;
					color: #6c6c6c;
				}
			}

			.weather-tem {
				float: right;
				padding: 20rpx;

				text {
					display: inline-block;
					width: 20rpx;
					margin-left: 80rpx;
				}
			}
		}
	}
</style>